<template>
   <Menu
    ref="sideMenu"
    theme="dark"
    width="auto"
    :active-name="routeInfo.meta.activeName"
    :open-names="openedSubmenuArr"
    @on-select="changeMenu">
    <template v-for="item in menuList">
      <MenuItem
        v-if="!item.children"
        :name="item.name"
        :key="item.name">
        <Icon :type="item.icon" :size="iconSize"></Icon>
        <span class="layout-text">{{ item.title }}</span>
      </MenuItem>
      <Submenu v-if="item.children" :name="item.name" :key="item.name">
        <template slot="title">
          <Icon :type="item.icon" :size="iconSize"></Icon>
          <span class="layout-text">{{ item.title }}</span>
        </template>
        <template v-for="child in item.children">
          <MenuItem :name="child.name" :key="child.name">
            <Icon :type="child.icon" :size="iconSize"></Icon>
            <span class="layout-text">{{ child.title }}</span>
          </MenuItem>
        </template>
      </Submenu>
    </template>
   </Menu>
</template>

<script>
import { mapState } from 'vuex'
import { cloneObj } from 'common/js/util'
import { homeMenuList } from 'common/js/modules'

export default {
  props: {
    iconSize: {
      type: Number,
      default: 14
    }
  },
  created () {
    this.initMenuList()
    this.initMenuOpen()
  },
  computed: {
    ...mapState([
      'routeInfo'
    ])
  },
  data () {
    return {

    }
  },
  methods: {
    changeMenu (name) {
      this.$router.push({ name })
    },
    initMenuOpen () {
      this.openedSubmenuArr = []
      const { needOpen } = this.routeInfo.meta
      if (needOpen) {
        this.openedSubmenuArr.push(needOpen)
      }
    },
    initMenuList () {
      this.menuList = cloneObj(homeMenuList)
    }
  }
}
</script>
